import React, {useState} from "react";
import {Modal} from "antd";

import {defaultPagination} from "@/utils/util";
import {useRequest} from "ahooks";
import {findByOrderDetailList} from "@/services/ant-design-pro/order";
import ProTable from "@ant-design/pro-table";
import {ProDescriptions} from "@ant-design/pro-descriptions";

interface Props {
  id?: number | undefined,
  row: any | undefined
}

const columns = [{
  title: "下单人员",
  key: "userName",
  dataIndex: "userName",

}, {
  title: "手机号",
  key: "phone",
  dataIndex: "phone",


}, {
  title: "订单号",
  key: "sn",
  dataIndex: "sn"
}, {
  title: "第三方订单",
  key: "partySn",
  dataIndex: "partySn"
}, {
  title: "支付方式",
  key: "paymentMethod",
  dataIndex: "paymentMethod"
}, {
  title: "支付状态",
  key: "paymentStatus",
  dataIndex: "paymentStatus"
}, {
  title: "支付金额",
  key: "paymentAmount",
  dataIndex: "paymentAmount",
  valueType: 'money',
},
  /*  {
    title: "优惠金额",
    key: "discountAmount",
    dataIndex: "discountAmount",
    valueType: 'money',
  }, {
    title: "支付总额",
    key: "totalAmount",
    dataIndex: "totalAmount",
    valueType: 'money',
  },*/
  {
    title: "产品总数",
    key: "quantity",
    dataIndex: "quantity"
  }, {
    title: "支付时间",
    key: "paymentDate",
    dataIndex: "paymentDate",
    valueType: 'dateTime',
  }, {
    title: "订单时间",
    key: "createDate",
    dataIndex: "createDate",
    valueType: 'dateTime',
  }, {
    title: "操作人员",
    key: "operatorName",
    dataIndex: "operatorName",

  }, {
    title: "地址",
    key: "address",
    dataIndex: "address",

  }]


const columnsTable = [{
  title: "图片",
  key: "image",
  dataIndex: "image",
  valueType: 'image',
}, {
  title: "名称",
  key: "goodsName",
  dataIndex: "goodsName"
}, {
  title: "单价",
  key: "price",
  dataIndex: "price"
}, {
  title: "支付金额",
  key: "paymentAmount",
  dataIndex: "paymentAmount",
  valueType: 'money',
}, {
  title: "产品总数",
  key: "quantity",
  dataIndex: "quantity"
}, {
  title: "订单时间",
  key: "createDate",
  dataIndex: "createDate",
  valueType: 'dateTime',
}]
const OrderShow: React.FC<Props> = (props) => {
  const {id, row} = props;
  const [isModalOpen, setIsModalOpen] = useState ( false );

  const showModal = () => {
    fetchByOrderDetailList ( id )
    setIsModalOpen ( true );
  };

  const handleOk = () => {
    setIsModalOpen ( false );
  };

  const handleCancel = () => {
    setIsModalOpen ( false );
  };
  //findByOrderDetailList
  // @ts-ignore
  const [pagination, setPagination] = useState<API.Pagination> ( defaultPagination () );
  const {
    run: fetchByOrderDetailList,

    data: dataList,
    loading,
  } = useRequest ( findByOrderDetailList, {
    debounceWait: 100,
    manual: true,
  } );

  // @ts-ignore
  return (<>
    <a onClick={showModal}>详细</a>
    <Modal footer={null} width={900} title={row.userName} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
      <ProDescriptions
        dataSource={row}
        columns={columns}
      >
      </ProDescriptions>
      <ProTable
  toolBarRender={false}
  pagination={false}
  search={false}
  dataSource={dataList?.data}
  loading={loading}

  cardBordered={true}
  columns={columnsTable}
  />
    </Modal>
  </>)
}

export default OrderShow;


